<template>
	<view class="picsPage">
		<scroll-view class="leftView" scroll-y>
			<view :class="active === index ? 'active': ''" v-for="(item,index) in scrollList" :key="item.id" @tap="leftClickHandle(index,item.id)">{{item.title}}</view>
		</scroll-view>
		<scroll-view class="rightView" scroll-y>
			<view class="item" v-for="(value,key) in scrollListData" :key="key">
				<image :src="value.img_url" @tap="previewImg(scrollListData,value.img_url)"></image>
				<text>{{value.title}}</text>
			</view>
			<text class="prompt" v-if="!scrollListData">暂无数据</text>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "pics",
		onLoad() {
			this.getScrollList();
		},
		data() {
			return {
				// 获取到所有的数据
				scrollList: [],
				// 默认激活的列表
				active: 0,
				// 右侧滚动列表的数据
				scrollListData: [],
			};
		},
		methods: {
			// 获取左侧列表
			async getScrollList() {
				let res = await uniCloud.callFunction({
					name: 'pics',
					data: {
						methods: "get"
					}
				});
				this.scrollList = res.result.data;
				// 默认第一条数据给它
				this.scrollListData = res.result.data[0].data;
			},
			async leftClickHandle(index, id) {
				// 点修改选中的列表项
				this.active = index;
				// 修改选中项时，动态改变右侧数据的值
				this.scrollListData = this.scrollList[index].data;
			},
			// 图片预览功能
			previewImg(item, current) {
				uni.previewImage({
					current,
					urls: item.map((value, key, arr) => {
						return value.img_url;
					}),
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.picsPage {
		display: flex;
	}

	.leftView {
		width: 200rpx;
		height: 100%;
		border-right: 1rpx solid #eee;

		view {
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
			color: #333;
			font-size: 30rpx;
			border-top: 1rpx solid #eee;
		}

		.active {
			background-color: #b50e03;
			color: #FFFFFF;
		}
	}

	.rightView {
		padding: 20rpx 0;
		width: 530rpx;
		margin: 0 auto;
		height: 100%;

		.item {
			margin-bottom: 20rpx;

			image {
				width: 520rpx;
				height: 300rpx;
				border-radius: 10rpx;
			}

			text {
				font-size: 28rpx;
			}
		}
	}

	.prompt {
		@include flexCenterCenter;
		color: #b50e03;
		height: 100%;
		font-size: 50rpx;
		letter-spacing: 15rpx;
	}
</style>
